<template>
    <div>
        <div class="page-shopping-cart">
            <div class="shopping-cart-title">
                <h4>购物清单</h4>
            </div>
            <div class="shopping-cart-content">
                <table cellspacing="0" cellpadding="0">
                    <thead>
                        <th><span :class="{'isActive':isSelectAll}" class="isSelected" @click="selectProduct(isSelectAll)"></span></th>
                        <th>商品</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>金额</th>
                        <th>操作</th>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in productList" :key="index">
                            <td><span :class="{'isActive':item.select}" class="select-item" @click="item.select=!item.select"></span></td>
                            <td>
                                <div class="product-info">
                                    <img src="http://img.alicdn.com/bao/uploaded/i2/3869213036/O1CN011YIWvAjnNRcs1qP_!!3869213036.jpg_240x240.jpg" alt="" style="display:inline-block;width:100px;height:100px;background:grey;text-align:left;float:left">
                                    <div class="" style="float:left;margin-left:10px">
                                        <h4>{{item.pro_name}}</h4>
                                        <p>品牌：{{item.pro_brand}}</p>
                                        <p>规格：{{item.pro_min}}</p>
                                        <p>配送仓储：{{item.pro_depot}}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="product-num">
                                    <span class="num-reduce" @click="num_reduce(index)">-</span><input type="text" v-model="item.pro_num"><span class="num-add" @click="num_add(index)">+</span>
                                </div>
                            </td>
                            <td>
                                <div class="product-price">
                                    ￥{{(item.pro_price).toFixed(2)}}
                                </div>
                            </td>
                            <td>
                                <div class="product-price-total">
                                    ￥{{(item.pro_num * item.pro_price).toFixed(2)}}
                                </div>
                            </td>
                            <td>
                                <div class="product-remove">
                                    <span class="product-del" @click = "productDel(index)">删除</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 统计商品与操作商品 -->
        <div class="shopcart-product-count" :class="{'accountBottom':isBottom}">
            <div class="account-content">
                 <span class="product-del-all">删除所有商品</span>
                <span class="shopping-continue">继续购物</span>
                <span class="" @click="accounting">去结算</span>
                <span class="product-all-price">{{shopcart_goods_num}}件商品总计(不含运费):<i style="color:red">{{productPriceTotal}}元</i></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Shopcart',
        data() {
            return {
                productList:[],
                totalPrice:0,
                clientHeight:document.documentElement.clientHeight,
                scrollHeight:document.documentElement.scrollHeight,
                scrollTop:0,
                isBottom:false
            }
        },
        methods: {
            //减少商品数量
            num_reduce(index){
               this.productList[index].pro_num--
               if(this.productList[index].pro_num<1){
                   this.productList[index].pro_num = 1
               }
            },
            //增加商品数量
            num_add(index){
                this.productList[index].pro_num++
            },
            //删除当前商品
            productDel(index){
                console.log(index)
                this.productList.splice(index,1)
                this.$store.commit('SET_PRODUCT',this.productList)
                //需要重新提交购物车商品信息到服务端更新购物车状态
                console.log(this.$store.state.goods.productList)

            },
            //选中当前商品
            selectProduct(select){
               for(var index in this.productList){
                   this.productList[index].select = !select
               }
            },
            accounting(){
                this.productList
            },
            //滚动条触发
            handleScroll(){
                this.scrollTop = document.documentElement.scrollTop
                if((this.clientHeight + this.scrollTop) == document.documentElement.scrollHeight){
                    this.isBottom = true
                }else{
                    this.isBottom = false
                } 
            }
        },
        computed: {
            //计算商品总价格
            productPriceTotal(){
                let totalPrice = 0
                var pro_price_selected = this.productList.filter(item =>{
                    return item.select
                })
                pro_price_selected.map(item =>{
                     totalPrice += Number(item.pro_num) * Number(item.pro_price)
                })
                return totalPrice.toFixed(2)
            },
            //计算商品数量
            shopcart_goods_num(){
                var product_item = this.productList.filter(item=>{
                    return item.select
                })
                var total = 0
                product_item.map(item=>{
                    total += item.pro_num
                })
                return total
            },
            //选中所有商品
            isSelectAll(){
                    return this.productList.every((val)=> {
                        return val.select;
                });
            }
        },
        mounted(){
            //获取用户购物车
            this.$store.dispatch('get_product').then(()=>{
                this.productList = this.$store.state.goods.productList
                this.productList.map((item)=>{
                    this.$set(item , "select", true)
                })
               
            })
            window.addEventListener('scroll', this.handleScroll)
            
           
        },
        watch:{
            productList:{
                handler(newval,oldval){
                    newval.map(item=>{
                        //商品数量输入框验证
                        if(!/^\+?[1-9][0-9]*$/.test(item.pro_num)){
                            item.pro_num = 1
                        }                     
                    })
                },
                deep: true
            },
            
        }
    }
</script>

<style lang="stylus" scoped>
    .page-shopping-cart{
        width 960px
        border-right 1px solid #e3e3e3
        border-left 1px solid #e3e3e3
        margin 20px auto
        border-top 2px solid #317ee7
        .shopping-cart-title{
            height 70px
            line-height 70px
            border-bottom 1px solid #e3e3e3
            h4{
                margin-left 20px
                font-size 16px
            }
        }
        .shopping-cart-content{
            table{
                width 100%
                thead{
                    background #e3e3e3
                    padding 0 
                    margin 0
                    th{
                        padding 10px
                    }
                    .isSelected{
                        display inline-block
                        width 22px
                        height 22px
                        background url(./shopping_cart.png) no-repeat -1px -1px
                    }
                    .isActive{
                        display inline-block
                        width 22px
                        height 22px
                        background url(./shopping_cart.png) no-repeat -1px -23px
                    }
                }
                tbody{
                    font-size 14px
                    tr{
                        td{
                            padding 20px
                            text-align center
                            border-bottom 1px solid #e3e3e3
                        .select-item{
                            display inline-block
                            width 22px
                            height 22px
                            background url(./shopping_cart.png) no-repeat -1px -1px
                        }
                        .isActive{
                            display inline-block
                            width 22px
                            height 22px
                            background url(./shopping_cart.png) no-repeat -1px -23px
                        }
                        .product-price-total{
                            width 120px
                        }
                        .product-remove{
                             cursor pointer
                        }
                        .product-info{
                            h4{
                                    text-align left
                                    padding-bottom 10px
                            }
                                p{
                                    font-size 12px
                                    text-align left
                                   
                                }
                            }
                            .product-num{
                                cursor pointer
                                span{
                                    display inline-block
                                    width 24px;
                                    border-top 1px solid #e3e3e3
                                    border-left 1px solid #e3e3e3
                                    border-bottom 1px solid #e3e3e3
                                    text-align center
                                    line-height 26px
                                    height 26px
                                    vertical-align middle

                                    background #eee
                                }
                                input{
                                    vertical-align middle
                                    width 12%
                                    outline none
                                    height 26px
                                    border none 
                                    text-align center
                                    border-bottom 1px solid #e3e3e3
                                    border-top 1px solid #e3e3e3
                                }
                            }
                        } 
                    }
                }
            }
        } 
    }
    .shopcart-product-count{
            // position fixed
            // width 100%
            // bottom 0px
            .account-content{
                width 960px
                margin 0 auto
                background #e3e3e3
                border 1px solid #e3e3e3
            }
            span{
                display inline-block
                height 50px
                text-align center
                line-height 50px
            }
            span:nth-child(1){
                
                width 100px
                color grey
                margin-left 100px
            }
            span:nth-child(2){
                
                width 100px
                margin-left 20px
                color grey
            }
            // 去结算
            span:nth-child(3){
               
                float right
                width 100px
                line-height 50px
                background #ff7700
                color #fff

            }
            span:nth-child(4){
                padding-right 10px
                float right
            }
            
        }
        .accountBottom{
            // position fixed
            // width 100%
            // bottom 48px  
        }
</style>